<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <title>找回密码</title>
    <meta name="viewport" content="width=device-width, initial-scale=1 ,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="static/ydui/ydui.rem.css">
    <link rel="stylesheet" href="static/css/font-awesome.min.css">
    <link rel="stylesheet" href="static/css/main.css">
    <!-- 引入rem自适应类库 -->
    <script src="static/ydui/ydui.flexible.js"></script>
</head>
<body>
<div id="app" v-cloak style="height:100%;background-color: #fff;">
    <yd-layout>
    	
    	<yd-navbar slot="navbar" title="找回密码">
            <a href="login.html" slot="left">
                <yd-navbar-back-icon>返回</yd-navbar-back-icon>
            </a>
        </yd-navbar>

        <div id="step-1" v-show="step==1">
            <div class="ox-login-title">找回密码</div>
            <div class="ox-login-sub-title">&nbsp;</div>
            <yd-cell-group class="ox-login-cell-group">
                <yd-cell-item>
                    <span slot="left">手机号：</span>
                    <input slot="right" type="number" placeholder="请输入手机号" v-model="phone">
                </yd-cell-item>
                <yd-cell-item>
                    <span slot="left">验证码：</span>
                    <input type="text" slot="right" placeholder="请输入短信验证码" v-model="vercode">

                    <!-- ↓↓关键代码是这里↓↓ -->
                    <yd-sendcode slot="right"
                                 v-model="countDown"
                                 @click.native="getVerCode"
                                 type="hollow"
                    ></yd-sendcode>
                    <!-- ↑↑关键代码是这里↑↑ -->

                </yd-cell-item>
            </yd-cell-group>

            <div class="yd-button">
                <yd-button size="large" type="hollow" class="ox-login-button" @click.native="nextStep">下一步</yd-button>
            </div>
        </div>

        <div id="step-2" v-show="step==2">
            <div class="ox-login-title">重置密码</div>
            <div class="ox-login-sub-title">8~16位密码，包含英文+数字</div>
            <yd-cell-group class="ox-login-cell-group">
                <yd-cell-item>
                    <span slot="left">密码：</span>
                    <yd-input slot="right" type="password" v-model="password" placeholder="请输入密码"></yd-input>
                </yd-cell-item>
                <yd-cell-item>
                    <span slot="left">确认：</span>
                    <yd-input slot="right" type="password" v-model="repassword" placeholder="请确认密码"></yd-input>
                </yd-cell-item>
            </yd-cell-group>

            <div class="yd-button">
                <yd-button size="large" type="hollow" class="ox-login-button" @click.native="resetPassword">重置</yd-button>
            </div>
        </div>

    </yd-layout>
</div>
<script src="static/lib/jquery.min.js"></script>
<script src="static/lib/fastclick.js"></script>
<script>
    $(function() {
        FastClick.attach(document.body);
    });
</script>
<!-- 引入 Vue -->
<script src="static/lib/vue.min.js"></script>
<!-- 引入组件库 -->
<script src="static/ydui/ydui.rem.js"></script>
<script src="static/js/find-password.js"></script>
</body>
</html>